<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="未通过的预约" name="unpass"></el-tab-pane>
    <el-tab-pane label="审批中的预约" name="apply"></el-tab-pane>
    <el-tab-pane label="已通过的预约" name="pass"></el-tab-pane>
  </el-tabs>


    <el-table
      :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row
      style="width: 100%;" >    
    <el-table-column align="center" prop="devId" label="设备编号">
      </el-table-column>
      <el-table-column align="center" prop="devModel" label="设备型号">
      </el-table-column>
      <el-table-column align="center" prop="devName" label="设备名称">
      </el-table-column>
      <el-table-column align="center" prop="devBrand" label="设备品牌">
      </el-table-column>
      <el-table-column align="center" prop="devType" label="类型/属性">
      </el-table-column>
      <el-table-column align="center" prop="devPosition" label="使用位置">
      </el-table-column>
      <el-table-column align="center" prop="funcation" label="使用项目">
      </el-table-column>
      <el-table-column align="center" prop="stime" label="开始时间">
      </el-table-column>
       <el-table-column align="center" prop="etime" label="结束时间">
      </el-table-column>
      <el-table-column align="center" prop="is_anxious" label="是否加急">
      </el-table-column>
      <el-table-column align="center" label="操作">
      <template slot-scope="scope">
        <el-button type="danger"  size="small" @click="delDev(scope.row)" 
           v-if="listQuery.state == '审批中'">
           取消申请</el-button>
           <el-button type="primary"  size="small" @click="showDialog(scope.row)" 
           v-if="listQuery.state == '不通过'">
           查看回复</el-button>
           <el-button type="success"  size="small" @click="this.$message({message: '报修成功',type: 'success'});" 
           v-if="listQuery.state == '通过'">
           设备报修</el-button>
      </template>
      </el-table-column>
    
    </el-table>

  <div class="block">    
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>

    <el-dialog title="申请详情" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
              style='width: 600px; margin-left:50px;'>
        <el-form-item label="设备编号">
          {{dialogData.devId}}
        </el-form-item>
        <el-form-item label="设备型号">
          {{dialogData.devModel}}
        </el-form-item>
        <el-form-item label="设备名称"  >
          {{dialogData.devName}}
        </el-form-item>
        <el-form-item label="设备品牌">
          {{dialogData.devBrand}}
        </el-form-item>
        <el-form-item label="类型/属性">
          {{dialogData.devType}}
        </el-form-item>
        <el-form-item label="使用位置" >
          {{dialogData.devPosition}}
        </el-form-item>
        <el-form-item label="使用项目" >
          {{dialogData.funcation}}
        </el-form-item>
        <el-form-item label="回复" >
          {{dialogData.reply}}
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>










  </div>
</template>
<script>
import global from '../../Global'
  export default {
    data() {
      return {
        activeName: 'apply',
        list:[],//表格数据
        totalCount: 0,
        dialogFormVisible:false,
        listQuery: {
          pageNum: 1,//页码
          pageRow: 50,//每页条数
          state: '审批中',//表格状态
          userId: '',//当前登陆用户ID
        },
        dialogData:{
          devId:'',
          devModel:'',
          devName:'',
          devBrand:'',
          devType:'',
          devPosition:'',
          funcation:'',
          time:'',
          reply:'',



        }

      }
    },
    created() {//钩子函数创建时调用
      this.listQuery.userId = global.obj.userId;
      this.getList();
    },
    methods: {

      getList(){
        //查询项目
        this.listLoading = true;
        this.api({
          url: "devices/listApplyUser",
          method: "post",
          data: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
          console.log(this.list);
        })
      },
      handleClick(tab, event) {
        if(tab.name === "unpass")
          this.listQuery.state = "不通过";
        if(tab.name === "pass")
          this.listQuery.state = "通过";
        if(tab.name === "apply")
          this.listQuery.state = "审批中";
        this.getList();

      },

      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      showDialog(row){
          this.dialogData.devId = row.devId;
          this.dialogData.devModel= row.devModel;
          this.dialogData.devName= row.devName;
          this.dialogData.devBrand= row.devBrand;
          this.dialogData.devType= row.devType;
          this.dialogData.devPosition= row.devPosition;
          this.dialogData.funcation= row.funcation;
          this.dialogData.time= row.time;
          this.dialogData.reply= row.reply;
          this.dialogFormVisible = true;

      },
      delDev(row){
        let _vue = this;
        this.$confirm('确定删除申请', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.api({
            url: "devices/deleteApply",
            method: "post",
            data: {
              appId:row.id
            }
            }).then(() => {
              _vue.$message.success("申请已取消")
              _vue.getList();
          })
        })

      }

    }

  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
